import 'package:flutter/material.dart';

class ImageExpandedTest extends StatelessWidget {
  const ImageExpandedTest({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter layout demo'),
        ),
        // Change to buildFoo() for the other examples
        body: ListView(children: [
          const Text("布局太大而超出屏幕，受影响的边缘会出现黄色和黑色条纹图案"),
          buildOverflowingRow(),
          const Text(" Expanded widget，可以调整 widgets 的大小以适合行或列"),
          buildExpandedImages(),
          const Text("一个 widget 占用的空间是兄弟项的两倍"),
          buildExpandedImagesWithFlex()
        ]),
      ),
    );
  }

  Widget buildOverflowingRow() =>
      // #docregion overflowing-row
  Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      Image.asset('images/big/1.jpg'),
      Image.asset('images/big/2.jpg'),
      Image.asset('images/big/3.jpg'),
    ],
  );

  // #enddocregion overflowing-row

  Widget buildExpandedImages() =>
      // #docregion expanded-images
  Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Expanded(
        child: Image.asset('images/big/1.jpg'),
      ),
      Expanded(
        child: Image.asset('images/big/2.jpg'),
      ),
      Expanded(
        child: Image.asset('images/big/3.jpg'),
      ),
    ],
  );

  // #enddocregion expanded-images

  Widget buildExpandedImagesWithFlex() =>
      // #docregion expanded-images-with-flex
  Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Expanded(
        child: Image.asset('images/big/1.jpg'),
      ),
      Expanded(
        flex: 2,
        child: Image.asset('images/big/2.jpg'),
      ),
      Expanded(
        child: Image.asset('images/big/3.jpg'),
      ),
    ],
  );
// #enddocregion expanded-images-with-flex
}
